<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/axios.min.js"></script>
<script>

    window.onload=function (){

    }





    function login(){
        if (checkCode()=="验证码不正确") {
            return;
        }
        axios.get("/user/login",{
            params:{
                username:$("username").value,
                password:$("password").value
            }
        }).then(resp=>{
            var user=resp.data;
            console.log(user)
            if (user!=""){
                location.href="index.html"
            }else{
                $("loginSpan").style.color="red"
                $("loginSpan").innerHTML="登陆失败"
            }
        })
    }




    function checkCode(){
        axios.get("/user/testCode",{
            params:{
                userCode:$("checkCode").value
            }
        }).then(resp=>{
            var info = resp.data;
            $("codeSpan").innerHTML=info;
            return info;
            }
        )
    }


    function changeCode(){
        $("imgCode").src="/checkCode?"+Math.random();
    }

    function $(id) {
        return document.getElementById(id);
    }
</script>
<body>
用户名：<input type="text" id="username"><br>
密码：<input type="password" id="password"><br>
<img src="/checkCode" id="imgCode"><a href="javascript:changeCode()">看不清，请重新输入</a><br>
<input type="text" id="checkCode" onblur="checkCode(this)"><span id="codeSpan"></span><br>
验证码：<input type="button" value="登陆" onclick="login()"><span id="loginSpan"></span>
</body>
</html>